<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/27
  File: 01.7.2鼠标和指针事件.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>01.7.2鼠标和指针事件</title>
  <style></style>
</head>

<body>

  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <!--<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>-->
  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>
  <!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    // 由点击事件引起的破坏无障碍访问的典型示例：外部点击模式，
    // 示例：点击的下拉菜单遮住下面的按钮
    // 用户可以通过点击元素以外的地方来关闭已打开的弹出框。

    // 方式：在windows上附着 click 事件以关闭弹窗

    const { Component } = React

    class BlurExample extends Component {
      constructor(props) {
        super(props);

        this.state = { isOpen: false };
        this.timeOutId = null

        this.onClickHandler = this.onClickHandler.bind(this)
        this.onBlurHandler = this.onBlurHandler.bind(this)
        this.onFocusHandler = this.onFocusHandler.bind(this)
      }

      onClickHandler() {
        this.setState(currentState => ({
          isOpen: !currentState.isOpen
        }));
      }

      // 我们在下一个时间点使用 setTimeout 关闭弹窗。
      // 这是必要的，因为失去焦点事件会在新的焦点事件前被触发，
      // 我们需要通过这个步骤确认这个元素的一个子节点
      // 是否得到了焦点
      onBlurHandler() {
        this.timeOutId = setTimeout(() => {
          this.setState({
            isOpen: false
          })
        });
      }

      // 如果一个子节点获得了焦点，不要关闭弹窗
      onFocusHandler() {
        clearTimeout(this.timeOutId)
      }

      render() {
        // React 通过把失去焦点和获得焦点事件传输给父节点
        // 来帮助我们
        return (
          <div onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}>
            <button></button>
            {this.state.isOpen && (
              <ul>
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
              </ul>
            )}
          </div>
        );
      }
    }


    const element = <OuterClickExample />
    ReactDOM.render(element, document.getElementById('root'));

  </script>
</body>

</html>